<template>
  <div class="page4">
    <h2>
      <span><numberScroll :value="100"></numberScroll>+</span>
      别墅大宅设计大咖
    </h2>
    <div class="box wow" style="visibility: visible">
      <div class="box-wrap" v-if="!bianshen">
        <h3 class="">{{ tList[inactive].name }}</h3>
        <h4 class="">{{ tList[inactive].word }}</h4>
        <p class="">{{ tList[inactive].dis }}</p>
        <h6 class="">{{ tList[inactive].year }}年</h6>
        <h5 class="">从业年限</h5>
        <div class="btn">作品鉴赏</div>
      </div>
      <div class="box-wrap2">
        <h3>{{ tList[inactive].name }}</h3>
        <h4>{{ tList[inactive].word }}</h4>
        <p>{{ tList[inactive].dis }}</p>
        <h6>{{ tList[inactive].year }}年</h6>
        <h5>从业年限</h5>
        <div class="btn">作品鉴赏</div>
      </div>
    </div>
    <img
      src="/src/assets/img/bg_part4_letter.png"
      alt=""
      class="imgbg wow"
      style="visibility: visible"
    />
    <div class="pwrap">
      <div class="pic wow" style="visibility: visible">
        <div>
          <img
            alt=""
            :src="tList[inactive].img"
            :class="
              bianshen
                ? 'toggle-image-leave-active toggle-image-leave-to'
                : 'toggle-image-enter-active toggle-image-enter-to'
            "
          />
        </div>
      </div>
      <div class="dwrap wow" style="visibility: visible">
        <h3>出圈作品</h3>
        <swiper
          class="wow"
           loop="true"
          :modules="modules"
          :navigation="navigation"
          slidesPerView="2"
          spaceBetween="10"
          @slideChange="onSlideChange"
        >
          <swiper-slide v-for="(item, index) in tList[inactive].zuopin" :key="index">
            <div class="img-wrap" :class="[inactive == index && 'active']">
              <div class="img-wrap" style="cursor: auto">
                <img alt="" :src="item.image" lazy="loaded" />
              </div>
              <h6>{{ item.title }}</h6>
            </div>
          </swiper-slide>
        </swiper>
        <div class="next4">
          <img src="/src/assets/img/right.png" alt="" />
        </div>
      </div>
    </div>
    <swiper
      class="swiper2 wow"
      :freeMode="true"
      slidesPerView="5"
      spaceBetween="10"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(item, index) in tList" :key="index">
        <div class="img-wrap" :class="[inactive == index && 'active']" @click="acimg(index)">
          <img alt="" :src="item.image" />
          <i></i>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, A11y } from 'swiper/modules'
import 'swiper/css'
const inactive = ref(0)
const onSlideChange = () => {
  console.log('slide change')
}
const modules = ref([ Navigation, A11y])
const navigation = ref({
  nextEl: '.next4',
})
const tList = ref([
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪1',
    word: '设计总监1',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。1',
    year: '11',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际1',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际1',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  },
  {
    name: '王伊豪',
    word: '设计总监',
    dis: '只有设计与表现的完美结合才 能勾勒出一个全新舒适的家。 您的满意，我的追求。',
    year: '10',
    img: '/src/assets/img/img.png',
    image: '/src/assets/img/image.png',
    zuopin: [
      {
        title: '长虹天樾国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/a1b90a549f696a21d17ff46f96eefe42.jpg'
      },
      {
        title: '高水温莎国际',
        image:
          'https://www.shbotao.net//uploads/allimg/20220211/5265e7f0c7eafe43de5cc923586bca41.jpg'
      }
    ]
  }
])
const bianshen = ref(false)
const acimg = (index) => {
  bianshen.value = true
  setTimeout(() => {
    bianshen.value = false
  }, 300)
  inactive.value = index
}
</script>

<style>
.home .page4 {
  background: url(/src/assets/img/p4_bj.png);
  background-size: 100% 100%;
  padding: 1.1rem 0 0.66rem 0.3rem;
  overflow: hidden;
  position: relative;
}

.home .page4 > h2 {
  font-size: 0.56rem;
  font-family: Gilroy;
  font-weight: 700;
  color: #fff;
  -webkit-animation: slide-left-in 1s;
  animation: slide-left-in 1s;

  animation-fill-mode: forwards;
}

.home .page4 > h2 > span {
  color: #dd292c;
  font-family: Gilroy-Medium;
  display: inline-block;
  width: 1.35rem;
}

.home .page4 .box {
  position: relative;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
  border: 0.01rem solid transparent;
  z-index: 9;
}

.home .page4 .box > .box-wrap {
  position: absolute;
  z-index: 3;
  top: 0;
  width: 3rem;
  left: 0;
  animation: slide-down-in 1s forwards, fade-in 0.3s forwards;
}

.home .page4 .box > .box-wrap > h3 {
  font-size: 0.46rem;
  font-weight: 400;
  color: #fff;
  margin: 0.66rem 0 0.22rem;
  line-height: 0.46rem;
  opacity: 0;
  animation: slide-down-in 1s forwards, fade-in 1s forwards;
}

.home .page4 .box > .box-wrap > h4 {
  font-size: 0.28rem;
  font-weight: 400;
  color: #fff;
  opacity: 0;
  animation: slide-down-in 1s 0.2s forwards, fade-in 1s 0.2s forwards;
}

.home .page4 .box > .box-wrap > p {
  font-size: 0.22rem;
  font-weight: 400;
  color: #fff;
  line-height: 0.4rem;
  margin: 0.47rem 0 0.41rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: slide-down-in 1s 0.3s forwards, fade-in 1s 0.3s forwards;
}

.home .page4 .box > .box-wrap > h5 {
  font-size: 0.22rem;
  font-weight: 400;
  color: #fff;
  line-height: 0.22rem;
  margin: 0.17rem 0 0.58rem;
  opacity: 0;
  animation: slide-down-in 1s 0.4s forwards, fade-in 1s 0.4s forwards;
}

.home .page4 .box > .box-wrap > h6 {
  font-size: 0.84rem;
  font-family: Gilroy-Bold;
  font-weight: 700;
  color: #dd292c;
  line-height: 0.84rem;
  opacity: 0;
  animation: slide-down-in 1s 0.5s forwards, fade-in 1s 0.5s forwards;
}

.home .page4 .box > .box-wrap .btn {
  width: 2.16rem;
  height: 0.72rem;
  border: 0.02rem solid #dd292c;
  line-height: 0.72rem;
  text-align: center;
  font-size: 0.24rem;
  font-weight: 700;
  color: #dd292c;
  cursor: pointer;
  opacity: 0;
  animation: slide-down-in 1s 0.6s forwards, fade-in 1s 0.6s forwards;
}

.home .page4 .box > .box-wrap2 {
  pointer-events: none;
  left: 0;
  width: 3rem;
  opacity: 0;
}

.home .page4 .box > .box-wrap2 > h3 {
  font-size: 0.46rem;
  font-weight: 400;
  color: #fff;
  margin: 0.66rem 0 0.18rem;
  line-height: 0.46rem;
}

.home .page4 .box > .box-wrap2 > h4 {
  font-size: 0.22rem;
  font-weight: 400;
  color: #dd292c;
  line-height: 0.22rem;
}

.home .page4 .box > .box-wrap2 > p {
  font-size: 0.32rem;
  font-weight: 400;
  color: #fff;
  line-height: 0.32rem;
  margin: 0.47rem 0 0.41rem;
  position: relative;
  z-index: 1;
}

.home .page4 .box > .box-wrap2 > h5 {
  font-size: 0.22rem;
  font-weight: 400;
  line-height: 0.22rem;
  color: #dd292c;
}

.home .page4 .box > .box-wrap2 > h6 {
  font-size: 0.84rem;
  font-family: Gilroy-Bold;
  font-weight: 700;
  color: #fff;
  margin: 0.17rem 0 0.58rem;
  line-height: 0.84rem;
}

.home .page4 .box > .box-wrap2 .btn {
  width: 2.16rem;
  height: 0.72rem;
  border: 0.02rem solid #dd292c;
  line-height: 0.72rem;
  text-align: center;
  font-size: 0.24rem;
  font-weight: 700;
  color: #dd292c;
  cursor: pointer;
  margin-bottom: 0.46rem;
}

.home .page4 > .imgbg {
  position: absolute;
  top: 2.55rem;
  right: -0.4rem;
  width: 5.64rem;
  height: 2.5rem;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.home .page4 .pwrap {
  border: 0.01rem solid transparent;
  position: relative;
}

.home .page4 .pwrap .pic {
  position: absolute;
  right: 0.1rem;
  width: 5.25rem;
  height: 5.25rem;
  bottom: calc(100% - 0.72rem);
  overflow: hidden;
}

.home .page4 .pwrap .pic img {
  position: absolute;
  left: 0;
  top: 0;
  width: 5.25rem;
  height: 5.25rem;
  transition: transform 0.3s;
}

.home .page4 .pwrap .pic img.toggle-image-enter-active,
.home .page4 .pwrap .pic img.toggle-image-leave-active {
  transition: all 0.3s ease;
}

.home .page4 .pwrap .pic img.toggle-image-enter,
.home .page4 .pwrap .pic img.toggle-image-leave-to {
  transform: scale(1.2);
  opacity: 0;
}

.home .page4 .dwrap {
  width: 6.9rem;
  height: 3.24rem;
  background: #dd292c;
  border-radius: 1rem 0 1rem 0;
  position: relative;
  margin-top: 0.7rem;
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
  overflow: hidden;
}

.home .page4 .dwrap h3 {
  font-size: 0.32rem;
  font-weight: 400;
  color: #fff;
  padding: 0.36rem 0 0 0.61rem;
}

.home .page4 .dwrap .swiper {
  position: absolute;
  top: 1.04rem;
  left: 0.5rem;
  width: 4.25rem;
  height: 1.7rem;
}

.home .page4 .dwrap .swiper .swiper-slide {
  border-radius: 0.2rem;
  cursor: pointer;
}

.home .page4 .dwrap .swiper .swiper-slide h6 {
  box-sizing: border-box;
  text-align: center;
  font-size: 0.24rem;
  font-weight: 400;
  color: #fff;
  line-height: 0.3rem;
  width: 100%;
  padding: 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home .page4 .dwrap .swiper .img-wrap {
  position: relative;
  height: 1.3rem;
}
.home .page4 .dwrap .swiper .img-wrap img {
  width: 2rem;
}

.home .page4 .swiper2 {
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
  margin-top: 0.63rem;
  margin-left: -0.3rem;
  white-space: nowrap;
  overflow: auto;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}

.home .page4 .swiper2::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.home .page4 .swiper2::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.01rem transparent;
  border-radius: 0.1rem;
  background-color: transparent;
}

.home .page4 .swiper2::-webkit-scrollbar-thumb {
  border-radius: 0.1rem;
  box-shadow: inset 0 0 0.06rem rgba(0, 0, 0, 0.3);
  background: #dad6d6;
}

.home .page4 .swiper2 .swiper-slide {
  display: inline-block;
  width: 1.46rem;
  height: 1.78rem;
  margin-right: 0.1rem;
}

.home .page4 .swiper2 .swiper-slide:last-child {
  margin-right: 0;
}

.home .page4 .swiper2 .swiper-slide .img-wrap.active i {
  background: transparent;
}

.home .page4 .swiper2 .swiper-slide .img-wrap.active:after {
  opacity: 1;
  left: 0.1rem;
  top: 0.1rem;
  border-right: none;
  border-bottom: none;
  width: 0.14rem;
  height: 0.14rem;
}

.home .page4 .swiper2 .swiper-slide .img-wrap.active:before {
  opacity: 1;
  right: 0.1rem;
  bottom: 0.1rem;
  border-top: none;
  border-left: none;
  width: 0.14rem;
  height: 0.14rem;
}

.home .page4 .swiper2 .img-wrap {
  height: 1.78rem;
  position: relative;
  cursor: pointer;
}

.home .page4 .swiper2 .img-wrap img {
  width: 100%;
  height: 100%;
  display: block;
}

.home .page4 .swiper2 .img-wrap i {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 9;
  transition: background 0.3s;
}

.home .page4 .swiper2 .img-wrap:after,
.home .page4 .swiper2 .img-wrap:before {
  opacity: 0;
  content: '';
  position: absolute;
  border: 0.03rem solid #eb5518;
  width: 0;
  height: 0;
  transition: opacity 0.3s, border 0.3s;
}

.home .page4 .swiper2 .img-wrap:after {
  left: 0.1rem;
  top: 0.1rem;
  border-right: none;
  border-bottom: none;
}

.home .page4 .swiper2 .img-wrap:before {
  right: 0.1rem;
  bottom: 0.1rem;
  border-top: none;
  border-left: none;
}
.home .page4 .next4 {
  position: absolute;
  right: 0.8rem;
  top: 0.85rem;
}
.home .page4 .next4 img {
  width: 0.3rem;
  height: 0.6rem;
}
</style>